<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>

  <body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <script>
      /* 
        
            var obj = {
                img2:"第二张",
                img3:"第三张",
                img1:"第一张",
            }

            obj.img1
        
        */

      var canvas = document.querySelector("#mycanvas");
      var context = canvas.getContext("2d");

      var imgsObj = {
        img1: "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        img2: "https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        img3: "https://img2.baidu.com/it/u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      };
      // console.log(imgsObj.length);

      function loadImgs(imgsObj, cb) {
        // var length = 0;;

        // for(var i in imgsObj){
        //     length++;
        // }

        // console.log(length);

        var length = Object.keys(imgsObj).length;
        // console.log(length);
        // 循环对象 ；

        var resObj = {};
        var num = 0;
        for (let key in imgsObj) {
          if (imgsObj.hasOwnProperty(key)) {
            var img = document.createElement("img");
            img.src = imgsObj[key];
            img.onload = function () {
              num++;
              resObj[key] = this;
              if (num === length) {
                cb && cb(resObj);
              }
            };
          }
        }
      }

      loadImgs(imgsObj, function (resObj) {
        console.log(resObj);
        // console.log(imgArr);
        context.drawImage(resObj.img1, 0, 0, 100, 100);
        context.drawImage(resObj.img2, 100, 100, 100, 100);
        context.drawImage(resObj.img3, 200, 200, 100, 100);
      });
    </script>
  </body>
</html>
